<template>
  <div class="box">
    <header></header>
    <main>
      <div class="left">
        <div class="left_top">
          <LeftTop></LeftTop>
        </div>
        <div class="left_bootom">
          <LeftBottom></LeftBottom>
        </div>
      </div>
      <div class="center">
        <div class="center_item">
          <div>
            <CenterTop></CenterTop>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_top">
          <RightTop></RightTop>
        </div>
        <div class="right_bottom">
          <RightBottom></RightBottom>
        </div>
      </div>
    </main>
    <Centerbottom></Centerbottom>
  </div>
</template>

<script>
import LeftTop from '../../components/one/LeftTop.vue'
import LeftBottom from '../../components/one/LeftBottom.vue'
import RightTop from '../../components/one/RightTop.vue'
import RightBottom from '../../components/one/RightBottom.vue'
import Centerbottom from '../../components/Centerbottom.vue'
import CenterTop from '../../components/one/CenterTop.vue'
export default {
  components: {
    LeftTop,
    LeftBottom,
    RightTop,
    RightBottom,
    Centerbottom,
    CenterTop
  },
  setup() {
    return {}
  }
}
</script>

<style scoped lang='scss' >
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../../assets/images/pageBg.png');
}
header {
  width: 100%;
  height: 75px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  background: url('../../assets/images/Top.png') no-repeat;
  background-size: 100% 100%;
}
main {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 32%;
  height: 100%;
  background: url('../../assets/images/Left.png') no-repeat;
  background-size: 100% 100%;
}
.center {
  flex: 1;
}
.center_item {
  color: #fff;
  margin-top: 200px;
  height: 710px;
  background: url('../../assets/images/Bitmap.png') no-repeat;
  background-size: 100% 100%;
  div {
    height: 320px;
  }
}
.right {
  width: 32%;
  height: 100%;
  background: url('../../assets/images/Right.png') no-repeat;
  background-size: 100% 100%;
}
.left_top {
  margin-top: 70px;
  margin-left: 70px;
  margin-right: 80px;
}
.left_bootom {
  margin-top: 50px;
  margin-left: 70px;
  margin-right: 90px;
}
.right_top {
  margin-left: 70px;
  margin-top: 70px;
  margin-right: 80px;
}
.right_bottom {
  margin-top: 50px;
  margin-left: 80px;
  margin-right: 80px;
}
</style>